import React from 'react';
import { mock } from 'mockjs';
import { Select } from '@pxxtech/web';
import { DemoBlock } from 'demos';

const { Option, OptGroup } = Select;

const { driverOptions, cityOptions } = (() => {
  const driver = mock({
    'options|10': [
      {
        id: '@guid',
        driverName: '@cname',
        driverPhone: /^1\d{10}$/,
      },
    ],
  });
  const driverOptions = driver.options.map((item: any) => ({
    label: `${item.driverName} / ${item.driverPhone}`,
    value: item.id,
  }));
  const city = mock({
    'options|10': [
      {
        value: '@guid',
        label: '@city',
      },
    ],
  });
  return {
    driverOptions,
    cityOptions: city.options,
  };
})();

const Basic = () => {
  return (
    <div className="pxx-web">
      <DemoBlock title="选择司机">
        <Select options={driverOptions} />
      </DemoBlock>
      <DemoBlock title="多选城市">
        <div style={{ width: 200 }}>
          <Select mode="multiple" options={cityOptions} />
        </div>
      </DemoBlock>
      <DemoBlock title="分组">
        <Select defaultValue="lucy" style={{ width: 200 }}>
          <OptGroup label="Manager">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </OptGroup>
          <OptGroup label="Engineer">
            <Option value="Yiminghe">yiminghe</Option>
          </OptGroup>
        </Select>
      </DemoBlock>
    </div>
  );
};

export default Basic;
